<template>
<!-- 歌单收藏 -->
  <div class="sing-list-container">
    <template v-if="loadingIsShow">
      <van-loading type="spinner" class="loading" />
    </template>
    <template v-else>
      <div v-if="collectorData.subscribers.length == 0" class="no-collector">
        暂无收藏者
      </div>
      <div class="collector-box">
        <div
          class="collector-list"
          v-for="(item, index) in collectorData.subscribers"
          :key="index"
        >
          <img :src="item.avatarUrl" />
          <!-- 姓名 -->
          <div class="user-name_sex">
            <div>
              <span :title="item.nickname" class="user-name">{{ item.nickname }}</span>
              <!-- 性别 -->
              <span
                v-if="item.gender == 1"
                class="iconfont icon-nan sex-nan"
              ></span>
              <span
                v-if="item.gender == 2"
                class="iconfont icon-nvshi sex-nv"
              ></span>
            </div>
            <div class="user-signature-box">
              <span class="user-signature" v-if="item.signature">{{
                item.signature
              }}</span>
            </div>
          </div>
          <!-- 签名 -->
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useStore } from "vuex";
import axios from "axios";

const store = useStore();

// loading
const loadingIsShow = ref(true);

// 收藏者数据
const collectorData = ref("");

// 获取收藏数据
const getCollectorData = () => {
  axios
    .post(`/playlist/subscribers?id=${store.state.m_song.songListId}&limit=100`)
    .then((res) => {
      collectorData.value = res.data;
      loadingIsShow.value = false;
    })
    .catch((err) => {
      console.error(err);
    });
};
getCollectorData();
</script>
<style lang='less'>
@import url(../../assets/fonts/collector/iconfont.css);

.no-collector {
  color: rgba(0, 0, 0, 0.466);
  margin-top: 20px;
  text-align: center;
}
.collector-box {
  display: flex;
  flex-wrap: wrap;

  .collector-list {
    height: 90px;
    width: 400px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .user-name_sex {
      margin-left: 10px;
      height: 90px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .user-name{
        &:hover{
          color: black;
        }
      }

      &:hover{
        cursor: pointer;
      }

      .user-signature-box {
        margin-top: 6px;
        .user-signature {
          /* 文字省略 */
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }

      .sex-nv,
      .sex-nan {
        border-radius: 10px;
        margin-left: 3px;
      }
      .sex-nv {
        background-color: #ffcde8;

        color: #f5869a;
      }

      .sex-nan {
        background-color: #c0f3ff;

        color: #78cee7;
      }
    }

    img {
      width: 90px;
      height: 90px;
      border-radius: 45px;

      &:hover{
        cursor: pointer;
      }
    }
  }
}
</style>